<template>
	<view class="page">
		<view class="page_header">
			<navigation defaultButton="back">管理服务</navigation>
			<view class="page_header_search_panel">
				<image class="page_header_search_icon" src="https://images-vx.oss-cn-beijing.aliyuncs.com/images-vx/search.png" mode="aspectFit"></image>
				<input class="page_header_search_input" v-model="searchModelSearch" @confirm="search" type="text" value="" placeholder="请输入服务名称" placeholder-class="page_header_search_placeholder" />
			</view>
			<tabs class="tabs" :list="tabs" v-model="tabActive" seamless="true"></tabs>
		</view>
		<view class="page_scroll">
			<swiper :current-item-id="tabActive" @change="swiperChange" class="swiper-container">
				<swiper-item :item-id="tabs[0]">
					<scroll-view scroll-y="true" class="page_main" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list"><order-list :order-list="auditList" @search="search"></order-list></view>
						<view class="no-data">
							<view class="more">
								<uni-load-more :status="auditMoreStatus" :content-text="auditMoreContentText" iconType="spinner" color="#666666"></uni-load-more>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[1]">
					<scroll-view scroll-y="true" class="page_main" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list"><order-list :order-list="serviceList" @search="search"></order-list></view>
						<view class="no-data">
							<view class="more">
								<uni-load-more :status="serviceMoreStatus" :content-text="serviceMoreContentText" iconType="spinner" color="#666666"></uni-load-more>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[2]">
					<scroll-view scroll-y="true" class="page_main" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list"><order-list :order-list="outList" @search="search"></order-list></view>
						<view class="no-data">
							<view class="more"><uni-load-more :status="outMoreStatus" :content-text="outMoreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item :item-id="tabs[3]">
					<scroll-view scroll-y="true" class="page_main" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom" :lower-threshold="100">
						<view class="list"><order-list :order-list="allList" @search="search"></order-list></view>
						<view class="no-data">
							<view class="more"><uni-load-more :status="allMoreStatus" :content-text="allMoreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import * as serveApi from '@/api/orgApi/serve.js';
import { uniLoadMore } from '@dcloudio/uni-ui';
import orderList from './orderList.vue';
export default {
	components: {
		orderList,
		uniLoadMore
	},
	data() {
		return {
			searchModelSearch: '',
			enums: this.$enums,
			tabs: ['审核中', '服务中', '已下架', '全部服务'],
			tabActive: '审核中',
			allList: [],
			allSearchModel: {
				current: 1,
				size: 10,
				state: null
			},
			// more
			allMoreStatus: 'more',
			allMoreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			auditList: [],
			auditSearchModel: {
				current: 1,
				size: 10,
				state: this.$enums['管理服务类型']['审核中']
			},
			// more
			auditMoreStatus: 'more',
			auditMoreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			serviceList: [],
			serviceSearchModel: {
				current: 1,
				size: 10,
				state: this.$enums['管理服务类型']['服务中']
			},
			// more
			serviceMoreStatus: 'more',
			serviceMoreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			outList: [],
			outSearchModel: {
				current: 1,
				size: 10,
				state: this.$enums['管理服务类型']['已下架']
			},
			// more
			outMoreStatus: 'more',
			outMoreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			}
		};
	},
	onShow() {
		this.getOrderList();
	},
	methods: {
		swiperChange(e) {
			this.$set(this, 'tabActive', e.detail.currentItemId);
			if (this.tabActive == '审核中') {
				this.auditSearchModel.current = 1;
				this.auditSearchModel.search = this.searchModelSearch;
			} else if (this.tabActive == '服务中') {
				this.serviceSearchModel.current = 1;
				this.serviceSearchModel.search = this.searchModelSearch;
			} else if (this.tabActive == '已下架') {
				this.outSearchModel.current = 1;
				this.outSearchModel.search = this.searchModelSearch;
			} else {
				this.allSearchModel.current = 1;
				this.allSearchModel.search = this.searchModelSearch;
			}
			this.getOrderList();
		},
		search() {
			if (this.tabActive == '审核中') {
				this.auditSearchModel.current = 1;
				this.auditSearchModel.search = this.searchModelSearch;
			} else if (this.tabActive == '服务中') {
				this.serviceSearchModel.current = 1;
				this.serviceSearchModel.search = this.searchModelSearch;
			} else if (this.tabActive == '已下架') {
				this.outSearchModel.current = 1;
				this.outSearchModel.search = this.searchModelSearch;
			} else {
				this.allSearchModel.current = 1;
				this.allSearchModel.search = this.searchModelSearch;
			}
			this.getOrderList();
		},
		getOrderList() {
			if (this.tabActive == '审核中') {
				this.auditMoreStatus = 'loading';
				serveApi
					.getOrgServe(this.auditSearchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.auditSearchModel.current == 1) {
								this.auditList = [];
							}
							if (res.data && res.data.length == 10) {
								this.auditMoreStatus = 'more';
								this.auditSearchModel.current += 1;
								this.auditList = [...this.auditList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.auditMoreStatus = 'noMore';
								this.auditSearchModel.current += 1;
								this.auditList = [...this.auditList, ...res.data];
							} else {
								this.auditMoreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.auditMoreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			} else if (this.tabActive == '服务中') {
				this.serviceMoreStatus = 'loading';
				serveApi
					.getOrgServe(this.serviceSearchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.serviceSearchModel.current == 1) {
								this.serviceList = [];
							}
							if (res.data && res.data.length == 10) {
								this.serviceMoreStatus = 'more';
								this.serviceSearchModel.current += 1;
								this.serviceList = [...this.serviceList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.serviceMoreStatus = 'noMore';
								this.serviceSearchModel.current += 1;
								this.serviceList = [...this.serviceList, ...res.data];
							} else {
								this.serviceMoreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.serviceMoreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			} else if (this.tabActive == '已下架') {
				this.outMoreStatus = 'loading';
				serveApi
					.getOrgServe(this.outSearchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.outSearchModel.current == 1) {
								this.outList = [];
							}
							if (res.data && res.data.length == 10) {
								this.outMoreStatus = 'more';
								this.outSearchModel.current += 1;
								this.outList = [...this.outList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.outMoreStatus = 'noMore';
								this.outSearchModel.current += 1;
								this.outList = [...this.outList, ...res.data];
							} else {
								this.outMoreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.outMoreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			} else {
				this.allMoreStatus = 'loading';
				serveApi
					.getOrgServe(this.allSearchModel)
					.then(res => {
						if (res.code === 0) {
							if (this.allSearchModel.current == 1) {
								this.allList = [];
							}
							if (res.data && res.data.length == 10) {
								this.allMoreStatus = 'more';
								this.allSearchModel.current += 1;
								this.allList = [...this.allList, ...res.data];
							} else if (res.data && res.data.length < 10) {
								this.allMoreStatus = 'noMore';
								this.allSearchModel.current += 1;
								this.allList = [...this.allList, ...res.data];
							} else {
								this.allMoreStatus = 'noMore';
							}
						}
					})
					.catch(e => {
						this.allMoreStatus = 'noMore';
						uni.showToast({
							title: e.msg,
							icon: 'none',
							duration: 1000
						});
					});
			}
		},
		// 滑动到底部。分页处理
		scrollBottom() {
			this.getOrderList();
		}
	}
};
</script>

<style lang="stylus">
.page_header_search_panel
	margin-bottom 20rpx
.page_scroll
	position absolute
	top calc(283rpx + var(--status-bar-height))
	right 0rpx
	bottom 0rpx
	left 0rpx
	.page_main
		box-sizing border-box
	.swiper-container, .page_main
		height 100%
		background-color #FFFFFF
		.list
			width 100%
			.list_item
				display flex
				flex-direction column
				background-color #FFFFFF
				border-radius 12rpx
				position relative
				&::after
					content ''
					position absolute
					left 0
					right 0
					bottom 0rpx
					height 2rpx
					background-color rgba(244, 244, 244, 1)
				.info_panel
					width 100%
					display flex
					justify-content space-between
					padding 30rpx
					box-sizing border-box
					.image
						width 204rpx
						height 204rpx
						border-radius 23rpx
						align-self baseline
					.info
						flex 1
						margin-left 20rpx
						box-sizing border-box
						display flex
						flex-direction column
						justify-content space-between
						.info_header
							width 100%
							display flex
							justify-content space-between
							.title
								flex 1
								margin-right 10rpx
								letter-spacing 1rpx
								font-size 32rpx
								font-family PingFang SC
								font-weight 400
								color #333333
								display flex
								.titile_text
									flex 1
									overflow hidden
									text-overflow ellipsis
									display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
									-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
									-webkit-line-clamp 1 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
									word-wrap break-word
								.sign
									margin-left 10rpx
									font-size 28rpx
									font-family PingFang SC
									font-weight 400
									color #FFFFFF
									padding 4rpx
									border-radius 8rpx
									transform scale(0.7)
								.green
									background-color rgba(0, 181, 0, 1)
								.orange
									background-color rgba(246, 132, 21, 1)
							.price
								font-size 32rpx
								font-family PingFang SC
								font-weight bold
								color #FF4200
							.gratis
								color rgba(51, 51, 51, 1)
						.info_container
							flex 1
							margin-top 15rpx
							font-size 24rpx
							letter-spacing 1rpx
							font-family PingFang SC
							font-weight 400
							color #999999
							.text
								overflow hidden
								text-overflow ellipsis
								display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
								-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
								-webkit-line-clamp 2 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
								word-wrap break-word
						.info_footer
							margin-top 10rpx
							display flex
							justify-content space-between
							.organization
								font-size 24rpx
								font-family PingFang SC
								font-weight 400
								color #4594FF
								border-radius 10rpx
								padding 3rpx 8rpx
							.check
								background-color rgba(37, 143, 255, 0.1)
								color #4594FF
							.serve
								background-color rgba(251, 123, 34, 0.1)
								color rgba(255, 125, 33, 1)
							.out
								background-color rgba(153, 153, 153, 0.1)
								color rgba(153, 153, 153, 1)
							.count
								font-size 24rpx
								font-family PingFang SC
								font-weight 400
								color #999999
				.price_panel
					padding 0rpx 30rpx
					box-sizing border-box
					.btn_panel
						display flex
						margin-bottom 30rpx
						box-sizing border-box
						.cancel, .detail, .confirm
							display inline-block
							font-size 24rpx
							font-family PingFang SC
							font-weight 400
							color #999999
							border 2rpx solid rgba(153, 153, 153, 1)
							padding 6rpx 20rpx
							border-radius 24rpx
						.detail
							border-color rgba(255, 125, 33, 1)
							color rgba(255, 125, 33, 1)
						.confirm
							margin-left 30rpx
							border-color rgba(255, 125, 33, 1)
							background-color rgba(255, 125, 33, 1)
							color rgba(255, 255, 255, 1)
						.btn_left
							flex 1
</style>
